<template>
    <div class="inapply-approve">
        <div class="search-box">
            <el-form :inline="true" class="demo-form-inline" size="mini">

                <el-row>
                    <el-col :span="22">
                        <el-form-item label="返厂入库单号">
                            <el-input placeholder="出库单号" v-model="search.idoCode"></el-input>
                        </el-form-item>

                        <el-form-item label="返厂入库标志">
                            <el-select v-model="search.status" placeholder="返厂从出库标志">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="未入库" value=0></el-option>
                                <el-option label="已入库" value=1></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="制单人">
                            <el-input placeholder="制单人" v-model="search.createBy"></el-input>
                        </el-form-item>


                        <el-form-item label="制单日期">
                            <el-date-picker
                                    v-model="createTime"
                                    @change="chooseTime"
                                    type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    align="left">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="19">
                        <el-form-item label="审核日期">
                            <el-date-picker
                                    v-model="appTime"
                                    @change="applyChooseTime"
                                    type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    align="left">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-button type="primary" @click="findPage" icon="el-icon-search">搜索</el-button>
                            <el-button type="warning" @click="resetForm" icon="el-icon-refresh-right">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <el-button-group>
                <el-button type="primary" size="mini" @click="searchApproved">已审核</el-button>
                <el-button type="primary" size="mini" @click="searchToApprove">未审核</el-button>
                <el-button type="primary" size="mini" @click="searchReject">审核未通过</el-button>
                <el-button type="primary" size="mini" @click="resetForm">全部</el-button>
            </el-button-group>
        </div>

        <br>
        <!--展示-->
        <div class="table-box">
            <el-table height="400" border :data="applyList" :stripe="true" style="width: 100%">

                <el-table-column type="index" width="50" label="序号"></el-table-column>

                <el-table-column prop="idoCode" label="返厂入库单号"></el-table-column>

                <el-table-column prop="status" label="返厂入库标志">
                    <template #default="slotProps">
                        <span v-if="slotProps.row.status===0">未出库</span>
                        <span v-if="slotProps.row.status===1">已出库</span>
                    </template>
                </el-table-column>

                <el-table-column prop="createBy" label="制单人"></el-table-column>

                <el-table-column prop="createTime" label="制单时间" :formatter="creatFormatter"></el-table-column>

                <el-table-column prop="approver" label="审批人"></el-table-column>

                <el-table-column prop="approverTime" label="审批时间" :formatter="approveFormatter"></el-table-column>


                <el-table-column prop="approveStatus" label="审批状态">
                    <template #default="slotProps">
                        <span v-if="slotProps.row.approveStatus===0">审核未通过</span>
                        <span v-if="slotProps.row.approveStatus===1">未审核</span>
                        <span v-if="slotProps.row.approveStatus===2">已通过</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template #default="slotProps">
                        <el-button type="primary" round size="mini" @click="showInfo(slotProps.row)"
                                   v-if="slotProps.row.approveStatus!==2">审核
                        </el-button>
                        <el-button type="warning" round size="mini" @click="showApprove(slotProps.row)">审核跟踪</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <!--分页组件-->
        <div class="page-box">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--模态框-->
        <div class="approve-box">
            <el-dialog title="出库申请单详情" :visible.sync="dialogTableVisible">
                <el-card class="goodList-card">
                    <template #header>
                        <div class="card-header">
                            <span style="font-size: 16px">商品详情：</span>
                        </div>
                    </template>
                    <el-table :data="goodList" height="250" border :stripe="true">

                        <el-table-column type="index" width="50" label="序号"></el-table-column>

                        <el-table-column prop="goodImei" label="商品串号"></el-table-column>

                        <el-table-column prop="goodName" label="商品名称"></el-table-column>

                        <el-table-column prop="goodType" label="商品类型"></el-table-column>

                        <el-table-column prop="goodBrand" label="商品品牌"></el-table-column>

                        <el-table-column prop="goodModel" label="商品型号"></el-table-column>

                        <el-table-column prop="goodColor" label="商品颜色"></el-table-column>

                        <el-table-column prop="goodProvider" label="商品供应商"></el-table-column>

                        <el-table-column prop="goodMessage" label="商品追踪信息"></el-table-column>

                        <el-table-column prop="newImei" label="维修类型"></el-table-column>

                        <el-table-column prop="newImei" label="新串码"></el-table-column>

                    </el-table>
                </el-card>

                <el-card class="info-card" shadow="always">
                    <el-card class="box-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <span class="approve" style="font-size: 15px"><b>返厂地点：</b>&emsp;</span>
                            </div>
                        </template>
                        <span class="approve" style="font-size: 13px">{{refacLocation}}</span>
                    </el-card>
                    <el-card class="box-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <span class="approve" style="font-size: 15px"><b>备注：</b></span>
                            </div>
                        </template>
                        <span class="approve" style="font-size: 13px">{{comments}}</span>
                    </el-card>
                </el-card>

                <el-card class="box-card" v-if="type===1">
                    <template #header>
                        <div class="card-header">
                            <span>审核信息</span>
                        </div>
                    </template>
                    <el-card class="box-card-in" style="width: 33%">
                        <span class="approve">审核人：&emsp;</span>
                        <span class="approve">{{approver}}</span>
                    </el-card>
                    <el-card class="box-card-in" style="width: 33%">
                        <span class="approve">审核日期：&emsp;</span>
                        <span class="approve">{{formatApproveTime}}</span>
                    </el-card>
                    <el-card class="box-card-in" style="width: 33%">
                        <span class="approve">审核状态：&emsp;</span>
                        <span class="approve" v-if="approveStatus===0">审核未通过</span>
                        <span class="approve" v-if="approveStatus===1">未审核</span>
                        <span class="approve" v-if="approveStatus===2">已通过</span>
                    </el-card>
                    <el-card style="width: 99.2%">
                        <template #header>
                            <div class="card-header">
                                <span class="approve">审核意见</span>
                            </div>
                        </template>
                        <span class="approve">{{approverComments}}</span>
                    </el-card>
                </el-card>

                <el-card class="approve-card" shadow="always" v-if="type===0">
                    <template #header>
                        <div class="card-header">
                            <span class="approve" style="font-size: 15px"><b>审批意见：</b></span>
                        </div>
                    </template>
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="approverComments"></el-input>
                </el-card>
                <br>
                <el-button type="danger" @click="reject" icon="el-icon-circle-close" size="small"
                           v-if="type===0">审核不通过
                </el-button>
                <el-button type="success" @click="pass" icon="el-icon-circle-check" size="small"
                           v-if="type===0">审核通过
                </el-button>
                <el-button type="primary" @click="dialogTableVisible=false" icon="el-icon-back" size="small"
                           v-if="type===0">返回
                </el-button>

            </el-dialog>
        </div>
    </div>
</template>

<script>
    import inApplyApprove from "./index";

    export default inApplyApprove;
</script>

<style scoped src="./index.scss" lang="scss">

</style>